import React from 'react';
import { forwardRef } from 'react';
import './index.scss';

export interface WeatherProps {
  /**
   * 天气状态 (晴/多云/雨/雪等)
   */
  weatherStatus?: string;

  /**
   * 天气图标类型
   */
  weatherIcon?: 'sunny' | 'cloudy' | 'rainy' | 'snowy' | 'foggy';

  /**
   * 温度
   */
  temperature?: number;

  /**
   * 温度单位
   */
  temperatureUnit?: '°C' | '°F';

  /**
   * 湿度
   */
  humidity?: number;

  /**
   * 日期 (MM.DD格式)
   */
  date?: string;

  /**
   * 星期
   */
  weekday?: string;

  /**
   * 时间
   */
  time?: string;

  /**
   * 点击事件
   */
  onClick?: () => void;

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;

  // 低代码平台相关属性（不会传递到DOM）
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const Weather = forwardRef<HTMLDivElement, WeatherProps>((props, ref) => {
  const {
    weatherStatus = '晴',
    weatherIcon = 'sunny',
    temperature = 22,
    temperatureUnit = '°C',
    humidity = 93,
    date = '6.12',
    weekday = '星期四',
    time = '17:03',
    onClick,
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const weatherClassName = ['hzdz-weather', className].filter(Boolean).join(' ');

  // 天气图标映射
  const getWeatherIcon = (icon: string) => {
    const iconMap = {
      'sunny': '☀️',
      'cloudy': '☁️',
      'rainy': '🌧️',
      'snowy': '❄️',
      'foggy': '🌫️'
    };
    return iconMap[icon as keyof typeof iconMap] || '☀️';
  };

  return (
    <div
      ref={ref}
      onClick={onClick}
      className={weatherClassName}
      style={style}
      {...otherProps}
    >
      <div>
        {getWeatherIcon(weatherIcon)}
      </div>
      <div className="weather-text" style={{ marginLeft: 8}}>
        {weatherStatus}
      </div>
      <div className="weather-text" style={{ marginLeft: 22}}>
        {temperature}{temperatureUnit}
      </div>
      <div className="weather-title" style={{ marginLeft: 32}}>
        湿度
      </div>
      <div className="weather-text" style={{ marginLeft: 8, marginRight: 24}}>
        {humidity}
      </div>
      <div className="divider" />
      <div className="weather-text" style={{ marginLeft: 24}}>
        {date}
      </div>
      <div className="weather-title" style={{ marginLeft: 24}}>
        {weekday}
      </div>
      <div className="weather-text" style={{ marginLeft: 8}}>
        {time}
      </div>
    </div>
  );
});

export default Weather;
